<template>
  <div>
      <li> <div class="shujia">
            <div class="title">
                <h3>我的书架</h3>
            </div>
            <div class="shulist">
                <ul v-for="(comment,i) in books" :key="i">
                    <li>
                        <img :src="comment.imgs" alt="">
                        <div class="miaoshu">
                          <b>{{comment.name}}</b>
                          <br>
                          作者：{{comment.author}}
                          <br>
                          简介:{{comment.describe}}
                        </div>
                    </li>
                </ul>
                    <!-- <button>添加书籍</button> -->
            </div>
        </div></li>
        </div>
</template>

<script>
export default {
  data () {
    return {
      books: []
    }
  },
  methods: {
    loadcomment () {
      var carbook = JSON.parse(window.localStorage.getItem('book') || '{}')
      for (let i in carbook) {
        this.books.unshift(carbook[i])
      }
      // console.log(this.books)
    }
  },
  created () {
    this.loadcomment()
  }
}
</script>
<style scoped>
/* 书架 */

.shulist ul{
    width: 99%;
    margin: 0 auto;
}
.shulist ul li{
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid #CCC;
    position: relative;
    top: 30px;
}
.miaoshu{
   position: absolute;
   top: 0px;
   left: 30%;
   margin: 10px 10px 5px 10px;
}
.shulist img{
    width: 25%;
    margin: 5px 10px 5px 10px;
}
.shulist button{
    margin-left: 1%;
    width: 98%;
    height: 50px;
    line-height: 50px;
    background: #1296db;
    border: 1px solid #1296db;
    margin-top: 20px
}
</style>
